import { Component } from 'react'
import { View, Text, ScrollView, Image } from '@tarojs/components'
import { AtButton, AtActivityIndicator, AtIcon } from 'taro-ui'
import { observer, inject } from 'mobx-react'
import Taro from '@tarojs/taro'
import IconFont from '../../components/iconfont';
import cls from 'classnames'
import './index.less'

@inject('store')
@observer
export default class Index extends Component {
  state = {
    educationCertification: null,
    jobCertification: null,
    realNameCertification: null,
    loading: true
  }

  
  componentWillMount () { }

  componentDidMount () {
  }

  componentWillUnmount () { }

  componentDidShow () {
    this.getStatus()
  }

  componentDidHide () { }

  getStatus = async () => {
    this.setState({
      loading: true
    })
    const { id } = this.props.store.userInfo
    const { success, data } = await Taro.request({
      method: 'post',
      url: '/api/account/certification/status',
      data: {
        accountId: id
      }
    })
    if (success) {
      this.setState({
        ...data
      })
    }

    this.setState({
      loading: false,
    })
  }

  linkToAccountDetail = (item) => {
    Taro.navigateTo({
      url: `/pages/accountDetail/index?id=${item.id}`,
    })
  }

  getText = (status) => {
    if (status == 2) {
      return '认证失败'
    }
    if (status == 1) {
      return '已认证'
    }
    if (status === 0) {
      return '审核中'
    }

    return '去认证'
  }

  linkToRealNameCertification = () => {
    const { realNameCertification } = this.state
    if (realNameCertification == 1) {
      return;
    }

    Taro.navigateTo({
      url: `/pages/realNameCertification/index`,
    })
  }

  linkToJobCertification = () => {
    const { jobCertification } = this.state
    if (jobCertification == 1) {
      return;
    }
    
    Taro.navigateTo({
      url: `/pages/jobCertification/index`,
    })
  }

  linkToEducationCertification = () => {
    const { educationCertification } = this.state
    if (educationCertification == 1) {
      return;
    }
    
    Taro.navigateTo({
      url: `/pages/educationCertification/index`,
    })
  }

  render () {
    const { loading, educationCertification, jobCertification, realNameCertification } = this.state;

    return (
      <View
        className='certification-page'
      >
        <View className='certification-page-header'>
          <View className='title'>
            为什么要认证？
          </View>
          <View className='header-tag'>
            <View className='header-tag-item'>
              更真实
            </View>
            <View className='header-tag-item'>
              更靠谱
            </View>
            <View className='header-tag-item'>
              更优质
            </View>
          </View>
        </View>

        <View className='card-list'>
          <View className='card-list-item'>
            <View className='icon-wrap shenfenrenzheng'>
              <IconFont name='shenfenrenzheng' size={60} color={true ? '#FFF' : 'red'} />
            </View>
            <View className='content'>
              <View className='content-title'>
                实名认证
              </View>
              <View className='content-desc'>
                与公安系统验证证件真实性  
              </View> 
            </View>

            <View
              className={cls('status', { success: realNameCertification == 1, fail: realNameCertification == 2, pending: realNameCertification === 0, loading })}
              onClick={this.linkToRealNameCertification}
            >
              {this.getText(realNameCertification)}
            </View>
          </View>

          <View className='card-list-item'>
            <View className='icon-wrap zhengjian'>
              <IconFont name='zhengjian' size={60} color={true ? '#FFF' : 'red'} />
            </View>
            <View className='content'>
              <View className='content-title'>
                工作认证
              </View>
              <View className='content-desc'>
                职场单身聚集地，人工严格审核 
              </View> 
            </View>

            <View
              className={cls('status', { success: jobCertification == 1, fail: jobCertification == 2, pending: jobCertification === 0, loading })}
              onClick={this.linkToJobCertification}
            >
             {this.getText(jobCertification)}
            </View>
          </View>


          <View className='card-list-item'>
            <View className='icon-wrap xuelishuiping'>
              <IconFont name='xuelishuiping' size={60} color={true ? '#FFF' : 'red'} />
            </View>
            <View className='content'>
              <View className='content-title'>
                学历认证
              </View>
              <View className='content-desc'>
                高学历都在用，人工严格审核 
              </View> 
            </View>

            <View
              className={cls('status', { success: educationCertification == 1, fail: educationCertification == 2, pending: educationCertification === 0, loading })}
              onClick={this.linkToEducationCertification}
              >
              {this.getText(educationCertification)}
            </View>
          </View>
        </View>
      </View>
    )
  }
}